<template>
    <div>
        <div class="headLine"><span>头条精选</span><span class="span2">更多</span>
            <svg data-v-21ab4c8b="" viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em"
                 fill="currentColor" aria-hidden="true" focusable="false" class="">
                <!--                右侧圆圈中的小角标-->
                <path
                        d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z">
                </path>
                <path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
                </path>
            </svg>
        </div>
        <div class="headLineBottom">
            <router-link to="/Buffer" tag="div" class="headLineBottom1">
                <a><img :src="list[index].url" alt=""></a>
                <p style="color: black">天亮教育2020暑期班火热招生中</p>
            </router-link>
            <router-link to="/Buffer" tag="div" class="headLineBottom1">
                <a><img :src="list[index2].url" alt=""></a>
                <p style="color: black">小米集团-科大16级韩同学成长经历分享</p>
            </router-link>
            <router-link to="/Buffer" tag="div" class="headLineBottom1">
                <a><img :src="list[index2].url" alt=""></a>
                <p style="color: black">米联科技-科大16级郭同学成长经历分享</p>
            </router-link>
            <router-link to="/Buffer" tag="div" class="headLineBottom1">
                <a><img :src="list[index2].url" alt=""></a>
                <p>万向思维-科大16级支同学成长经历分享</p>
            </router-link>
            <router-link to="/Buffer" tag="div" class="headLineBottom1">
                <a><img :src="list[index2].url" alt=""></a>
                <p style="color: black">尚云科技-科大15级王同学成长经历分享</p>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Headline",
        data() {
            return {
                index: 0,
                index2: 1,
                list: [
                    {
                        url: 'https://online-course.nos-eastchina1.126.net/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB_%E6%8B%B7%E8%B4%9D-1250274708364984320.jpg',
                        experience: "小米集团-科大16级韩同学成长经历分享"
                    },
                    {
                        url: 'https://online-course.nos-eastchina1.126.net/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB_%E6%8B%B7%E8%B4%9D-1250274708364984320.jpg',
                        experience: "小米集团-科大16级韩同学成长经历分享"
                    }
                ],
            }
        }
        , created() {

        }
    }
</script>

<style scoped>
    /*头条*/
    .headLine {
        width: 80%;
        height: 100px;
        border-bottom: 3px #e8e8e8 solid;
        font-size: 25px;
        text-align: center;
        line-height: 140px;
        margin-left: 10%;
    }

    .headLine .span2 {
        font-size: 16px;
        position: relative;
        left: 43%;
        color: #999999;
        font-size: 16px;
    }

    .headLine .span1 {
        margin-right: 54%;
    }

    .headLine svg {
        font-size: 16px;
        position: relative;
        left: 43%;
        top: 2%;
        color: #999999;
    }

    .headLineBottom {
        width: 80%;
        height: 10%;
        height: 190px;
        /*   border: red 1px solid; */
        margin-left: 10%;
        margin-top: 1%;
    }

    .headLineBottom1 {
        width: 225px;
        height: 178px;
        /*   border: red 1px solid; */
        float: left;
        margin-right: 1%;
    }

    .headLineBottom1 img {
        width: 100%;
        height: 80%;
        cursor: pointer;
        transition: all 0.6s;
    }
    .headLineBottom1 img:hover{
        transform: scale(0.9);
    }
    .headLineBottom1 p {
        display: inline-block;
        width: 220px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        margin-top: 2%;
        cursor: pointer;
    }
</style>